<template>
  <div class="p-2">
    <!-- 新建OTA版本模块 -->
    <!-- 页面标题 -->
    <el-card shadow="hover" style="margin-bottom: 8px">
      <div class="page-header">
        <div class="header-left">
          <el-button type="primary" plain icon="ArrowLeft" @click="handleBack">返回列表</el-button>
          <span class="page-title">新建OTA版本</span>
        </div>
        <div class="header-right">
          <el-button type="success" icon="Check" @click="handleSave">保存</el-button>
          <el-button type="primary" icon="Upload" @click="handleSaveAndPublish">保存并发布</el-button>
        </div>
      </div>
    </el-card>

    <!-- 创建步骤 -->
    <el-card shadow="hover" style="margin-bottom: 8px">
      <el-steps :active="currentStep" align-center>
        <el-step title="基本信息" description="填写版本基本信息" />
        <el-step title="固件上传" description="上传固件文件" />
        <el-step title="升级配置" description="配置升级策略" />
        <el-step title="测试验证" description="测试版本功能" />
        <el-step title="发布确认" description="确认发布信息" />
      </el-steps>
    </el-card>

    <!-- 表单内容 -->
    <el-card shadow="hover">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <!-- 步骤1：基本信息 -->
        <div v-show="currentStep === 0">
          <h3 class="step-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="版本名称" prop="versionName">
                <el-input v-model="form.versionName" placeholder="请输入版本名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="版本号" prop="versionNumber">
                <el-input v-model="form.versionNumber" placeholder="如：v1.0.0">
                  <template #prepend>v</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备类型" prop="deviceType">
                <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%">
                  <el-option label="传感器" value="sensor" />
                  <el-option label="控制器" value="controller" />
                  <el-option label="网关" value="gateway" />
                  <el-option label="摄像头" value="camera" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="硬件版本" prop="hardwareVersion">
                <el-select v-model="form.hardwareVersion" placeholder="请选择硬件版本" style="width: 100%">
                  <el-option label="v1.0" value="v1.0" />
                  <el-option label="v1.1" value="v1.1" />
                  <el-option label="v2.0" value="v2.0" />
                  <el-option label="v2.1" value="v2.1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="兼容版本" prop="compatibleVersions">
                <el-select v-model="form.compatibleVersions" multiple placeholder="请选择兼容的旧版本" style="width: 100%">
                  <el-option label="v1.0.0" value="v1.0.0" />
                  <el-option label="v1.1.0" value="v1.1.0" />
                  <el-option label="v1.2.0" value="v1.2.0" />
                  <el-option label="v2.0.0" value="v2.0.0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="版本类型" prop="versionType">
                <el-radio-group v-model="form.versionType">
                  <el-radio label="major">主版本</el-radio>
                  <el-radio label="minor">次版本</el-radio>
                  <el-radio label="patch">补丁版本</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="版本描述" prop="description">
            <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入版本描述" />
          </el-form-item>
          <el-form-item label="更新日志" prop="changelog">
            <el-input v-model="form.changelog" type="textarea" :rows="6" placeholder="请输入详细的更新日志" />
          </el-form-item>
        </div>

        <!-- 步骤2：固件上传 -->
        <div v-show="currentStep === 1">
          <h3 class="step-title">固件上传</h3>
          <el-form-item label="固件文件" prop="firmwareFile">
            <el-upload
              class="upload-demo"
              drag
              action="#"
              :auto-upload="false"
              :on-change="handleFileChange"
              :file-list="fileList"
              :before-upload="beforeUpload"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                将固件文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持 .bin, .hex, .fw 格式文件，文件大小不超过 100MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
          
          <!-- 文件信息 -->
          <div v-if="fileInfo.name" class="file-info">
            <h4>文件信息</h4>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="文件名">{{ fileInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="文件大小">{{ formatFileSize(fileInfo.size) }}</el-descriptions-item>
              <el-descriptions-item label="文件类型">{{ fileInfo.type }}</el-descriptions-item>
              <el-descriptions-item label="上传时间">{{ fileInfo.uploadTime }}</el-descriptions-item>
              <el-descriptions-item label="MD5校验" :span="2">
                <el-input v-model="fileInfo.md5" placeholder="计算中..." readonly>
                  <template #append>
                    <el-button @click="calculateMD5">重新计算</el-button>
                  </template>
                </el-input>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 固件验证 -->
          <div class="firmware-validation">
            <h4>固件验证</h4>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="validation-item">
                  <el-icon :class="validationStatus.format ? 'text-green-500' : 'text-red-500'">
                    <check v-if="validationStatus.format" />
                    <close v-else />
                  </el-icon>
                  <span>格式验证</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="validation-item">
                  <el-icon :class="validationStatus.signature ? 'text-green-500' : 'text-red-500'">
                    <check v-if="validationStatus.signature" />
                    <close v-else />
                  </el-icon>
                  <span>数字签名</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="validation-item">
                  <el-icon :class="validationStatus.compatibility ? 'text-green-500' : 'text-red-500'">
                    <check v-if="validationStatus.compatibility" />
                    <close v-else />
                  </el-icon>
                  <span>兼容性检查</span>
                </div>
              </el-col>
            </el-row>
            <el-button type="primary" @click="validateFirmware" :loading="validating">开始验证</el-button>
          </div>
        </div>

        <!-- 步骤3：升级配置 -->
        <div v-show="currentStep === 2">
          <h3 class="step-title">升级配置</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="升级策略" prop="upgradeStrategy">
                <el-radio-group v-model="form.upgradeStrategy">
                  <el-radio label="manual">手动升级</el-radio>
                  <el-radio label="auto">自动升级</el-radio>
                  <el-radio label="scheduled">定时升级</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否强制升级" prop="forceUpgrade">
                <el-switch v-model="form.forceUpgrade" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <!-- 定时升级配置 -->
          <div v-if="form.upgradeStrategy === 'scheduled'">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="升级开始时间" prop="scheduleStartTime">
                  <el-date-picker
                    v-model="form.scheduleStartTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="升级结束时间" prop="scheduleEndTime">
                  <el-date-picker
                    v-model="form.scheduleEndTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="升级超时时间" prop="upgradeTimeout">
                <el-input-number v-model="form.upgradeTimeout" :min="60" :max="3600" style="width: 100%" />
                <span style="margin-left: 8px; color: #909399;">秒</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重试次数" prop="retryCount">
                <el-input-number v-model="form.retryCount" :min="0" :max="5" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="批量升级数量" prop="batchSize">
                <el-input-number v-model="form.batchSize" :min="1" :max="100" style="width: 100%" />
                <span style="margin-left: 8px; color: #909399;">台/批次</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次间隔时间" prop="batchInterval">
                <el-input-number v-model="form.batchInterval" :min="1" :max="60" style="width: 100%" />
                <span style="margin-left: 8px; color: #909399;">分钟</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 目标设备选择 -->
          <el-form-item label="目标设备" prop="targetDevices">
            <el-radio-group v-model="form.targetDeviceType">
              <el-radio label="all">全部设备</el-radio>
              <el-radio label="group">设备分组</el-radio>
              <el-radio label="custom">自定义选择</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 设备分组选择 -->
          <div v-if="form.targetDeviceType === 'group'">
            <el-form-item label="选择分组" prop="deviceGroups">
              <el-select v-model="form.deviceGroups" multiple placeholder="请选择设备分组" style="width: 100%">
                <el-option label="生产环境" value="production" />
                <el-option label="测试环境" value="testing" />
                <el-option label="开发环境" value="development" />
                <el-option label="办公区域" value="office" />
                <el-option label="车间设备" value="workshop" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 自定义设备选择 -->
          <div v-if="form.targetDeviceType === 'custom'">
            <el-form-item label="选择设备" prop="selectedDevices">
              <el-transfer
                v-model="form.selectedDevices"
                :data="availableDevices"
                :titles="['可选设备', '已选设备']"
                filterable
                filter-placeholder="搜索设备"
              />
            </el-form-item>
          </div>

          <!-- 升级前检查 -->
          <el-form-item label="升级前检查">
            <el-checkbox-group v-model="form.preUpgradeChecks">
              <el-checkbox label="battery">电池电量检查（&gt;30%）</el-checkbox>
              <el-checkbox label="network">网络连接检查</el-checkbox>
              <el-checkbox label="storage">存储空间检查</el-checkbox>
              <el-checkbox label="version">版本兼容性检查</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 步骤4：测试验证 -->
        <div v-show="currentStep === 3">
          <h3 class="step-title">测试验证</h3>
          
          <!-- 测试设备选择 -->
          <el-form-item label="测试设备" prop="testDevices">
            <el-select v-model="form.testDevices" multiple placeholder="请选择测试设备" style="width: 100%">
              <el-option label="测试设备001" value="test001" />
              <el-option label="测试设备002" value="test002" />
              <el-option label="测试设备003" value="test003" />
            </el-select>
          </el-form-item>

          <!-- 测试项目 -->
          <el-form-item label="测试项目">
            <el-checkbox-group v-model="form.testItems">
              <el-checkbox label="basic">基础功能测试</el-checkbox>
              <el-checkbox label="performance">性能测试</el-checkbox>
              <el-checkbox label="stability">稳定性测试</el-checkbox>
              <el-checkbox label="compatibility">兼容性测试</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 测试结果 -->
          <div class="test-results">
            <h4>测试结果</h4>
            <el-table :data="testResults" style="width: 100%">
              <el-table-column label="测试项目" prop="testItem" />
              <el-table-column label="测试设备" prop="deviceId" />
              <el-table-column label="测试状态" prop="status">
                <template #default="scope">
                  <el-tag :type="getTestStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="测试结果" prop="result" />
              <el-table-column label="测试时间" prop="testTime" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewTestDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="test-actions">
            <el-button type="primary" @click="startTest" :loading="testing">开始测试</el-button>
            <el-button @click="stopTest" :disabled="!testing">停止测试</el-button>
            <el-button @click="resetTest">重置测试</el-button>
          </div>
        </div>

        <!-- 步骤5：发布确认 -->
        <div v-show="currentStep === 4">
          <h3 class="step-title">发布确认</h3>
          
          <!-- 版本信息确认 -->
          <el-descriptions title="版本信息" :column="2" border>
            <el-descriptions-item label="版本名称">{{ form.versionName }}</el-descriptions-item>
            <el-descriptions-item label="版本号">{{ form.versionNumber }}</el-descriptions-item>
            <el-descriptions-item label="设备类型">{{ getDeviceTypeText(form.deviceType) }}</el-descriptions-item>
            <el-descriptions-item label="硬件版本">{{ form.hardwareVersion }}</el-descriptions-item>
            <el-descriptions-item label="版本类型">{{ getVersionTypeText(form.versionType) }}</el-descriptions-item>
            <el-descriptions-item label="升级策略">{{ getUpgradeStrategyText(form.upgradeStrategy) }}</el-descriptions-item>
            <el-descriptions-item label="强制升级">{{ form.forceUpgrade ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="目标设备">{{ getTargetDeviceText() }}</el-descriptions-item>
          </el-descriptions>

          <!-- 发布选项 -->
          <div class="publish-options">
            <h4>发布选项</h4>
            <el-form-item label="发布状态" prop="publishStatus">
              <el-radio-group v-model="form.publishStatus">
                <el-radio label="draft">保存为草稿</el-radio>
                <el-radio label="testing">发布到测试环境</el-radio>
                <el-radio label="production">发布到生产环境</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="发布通知">
              <el-checkbox-group v-model="form.notifications">
                <el-checkbox label="email">邮件通知</el-checkbox>
                <el-checkbox label="sms">短信通知</el-checkbox>
                <el-checkbox label="webhook">Webhook通知</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="发布说明" prop="publishNotes">
              <el-input v-model="form.publishNotes" type="textarea" :rows="4" placeholder="请输入发布说明" />
            </el-form-item>
          </div>
        </div>
      </el-form>

      <!-- 步骤操作按钮 -->
      <div class="step-actions">
        <el-button @click="prevStep" :disabled="currentStep === 0">上一步</el-button>
        <el-button type="primary" @click="nextStep" :disabled="currentStep === 4">下一步</el-button>
        <el-button type="success" @click="handleSubmit" v-if="currentStep === 4">确认发布</el-button>
      </div>
    </el-card>

    <!-- 测试详情对话框 -->
    <el-dialog title="测试详情" v-model="testDetailDialog.visible" width="800px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="测试项目">{{ testDetailData.testItem }}</el-descriptions-item>
        <el-descriptions-item label="测试设备">{{ testDetailData.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="测试状态">{{ testDetailData.status }}</el-descriptions-item>
        <el-descriptions-item label="测试结果">{{ testDetailData.result }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ testDetailData.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ testDetailData.endTime }}</el-descriptions-item>
        <el-descriptions-item label="测试日志" :span="2">
          <div class="test-log">{{ testDetailData.log }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup name="VersionCreate" lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Check, Upload, UploadFilled, Close } from '@element-plus/icons-vue'

// 响应式数据
const currentStep = ref(0)
const fileList = ref([])
const validating = ref(false)
const testing = ref(false)

// 表单数据
const form = reactive({
  versionName: '',
  versionNumber: '',
  deviceType: '',
  hardwareVersion: '',
  compatibleVersions: [],
  versionType: 'minor',
  description: '',
  changelog: '',
  upgradeStrategy: 'manual',
  forceUpgrade: false,
  scheduleStartTime: null,
  scheduleEndTime: null,
  upgradeTimeout: 300,
  retryCount: 3,
  batchSize: 10,
  batchInterval: 5,
  targetDeviceType: 'all',
  deviceGroups: [],
  selectedDevices: [],
  preUpgradeChecks: ['battery', 'network'],
  testDevices: [],
  testItems: ['basic', 'performance'],
  publishStatus: 'testing',
  notifications: ['email'],
  publishNotes: ''
})

// 文件信息
const fileInfo = reactive({
  name: '',
  size: 0,
  type: '',
  uploadTime: '',
  md5: ''
})

// 验证状态
const validationStatus = reactive({
  format: false,
  signature: false,
  compatibility: false
})

// 可选设备列表
const availableDevices = ref([
  { key: 'dev001', label: '传感器设备001' },
  { key: 'dev002', label: '传感器设备002' },
  { key: 'dev003', label: '控制器设备001' },
  { key: 'dev004', label: '网关设备001' },
  { key: 'dev005', label: '摄像头设备001' }
])

// 测试结果
const testResults = ref([
  {
    testItem: '基础功能测试',
    deviceId: 'test001',
    status: '通过',
    result: '所有基础功能正常',
    testTime: '2024-01-15 10:30:00'
  },
  {
    testItem: '性能测试',
    deviceId: 'test001',
    status: '进行中',
    result: '测试中...',
    testTime: '2024-01-15 10:35:00'
  },
  {
    testItem: '基础功能测试',
    deviceId: 'test002',
    status: '失败',
    result: '网络连接异常',
    testTime: '2024-01-15 10:32:00'
  }
])

// 测试详情对话框
const testDetailDialog = reactive({
  visible: false
})

const testDetailData = reactive({})

// 表单验证规则
const rules = {
  versionName: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
  versionNumber: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
  deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
  hardwareVersion: [{ required: true, message: '请选择硬件版本', trigger: 'change' }],
  description: [{ required: true, message: '请输入版本描述', trigger: 'blur' }]
}

// 获取设备类型文本
const getDeviceTypeText = (type: string) => {
  const typeMap = {
    sensor: '传感器',
    controller: '控制器',
    gateway: '网关',
    camera: '摄像头'
  }
  return typeMap[type] || type
}

// 获取版本类型文本
const getVersionTypeText = (type: string) => {
  const typeMap = {
    major: '主版本',
    minor: '次版本',
    patch: '补丁版本'
  }
  return typeMap[type] || type
}

// 获取升级策略文本
const getUpgradeStrategyText = (strategy: string) => {
  const strategyMap = {
    manual: '手动升级',
    auto: '自动升级',
    scheduled: '定时升级'
  }
  return strategyMap[strategy] || strategy
}

// 获取目标设备文本
const getTargetDeviceText = () => {
  if (form.targetDeviceType === 'all') {
    return '全部设备'
  } else if (form.targetDeviceType === 'group') {
    return `设备分组: ${form.deviceGroups.join(', ')}`
  } else {
    return `自定义选择: ${form.selectedDevices.length}台设备`
  }
}

// 获取测试状态类型
const getTestStatusType = (status: string) => {
  const statusMap = {
    '通过': 'success',
    '失败': 'danger',
    '进行中': 'warning',
    '待测试': 'info'
  }
  return statusMap[status] || 'info'
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 返回列表
const handleBack = () => {
  ElMessageBox.confirm('确认返回？未保存的数据将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 返回列表页面
    ElMessage.info('返回版本列表')
  })
}

// 保存
const handleSave = () => {
  ElMessage.success('版本保存成功')
}

// 保存并发布
const handleSaveAndPublish = () => {
  ElMessage.success('版本保存并发布成功')
}

// 上一步
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 下一步
const nextStep = () => {
  if (currentStep.value < 4) {
    currentStep.value++
  }
}

// 文件变更
const handleFileChange = (file: any) => {
  fileList.value = [file]
  Object.assign(fileInfo, {
    name: file.name,
    size: file.size,
    type: file.name.split('.').pop(),
    uploadTime: new Date().toLocaleString(),
    md5: '计算中...'
  })
  
  // 模拟MD5计算
  setTimeout(() => {
    fileInfo.md5 = 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6'
  }, 2000)
}

// 上传前检查
const beforeUpload = (file: any) => {
  const allowedTypes = ['bin', 'hex', 'fw']
  const fileType = file.name.split('.').pop().toLowerCase()
  const isValidType = allowedTypes.includes(fileType)
  const isValidSize = file.size / 1024 / 1024 < 100

  if (!isValidType) {
    ElMessage.error('只支持 .bin, .hex, .fw 格式文件')
    return false
  }
  if (!isValidSize) {
    ElMessage.error('文件大小不能超过 100MB')
    return false
  }
  return true
}

// 计算MD5
const calculateMD5 = () => {
  fileInfo.md5 = '计算中...'
  setTimeout(() => {
    fileInfo.md5 = 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6'
    ElMessage.success('MD5计算完成')
  }, 1000)
}

// 验证固件
const validateFirmware = () => {
  validating.value = true
  
  // 模拟验证过程
  setTimeout(() => {
    validationStatus.format = true
    setTimeout(() => {
      validationStatus.signature = true
      setTimeout(() => {
        validationStatus.compatibility = true
        validating.value = false
        ElMessage.success('固件验证完成')
      }, 1000)
    }, 1000)
  }, 1000)
}

// 开始测试
const startTest = () => {
  testing.value = true
  ElMessage.info('开始测试...')
  
  // 模拟测试过程
  setTimeout(() => {
    testing.value = false
    ElMessage.success('测试完成')
  }, 5000)
}

// 停止测试
const stopTest = () => {
  testing.value = false
  ElMessage.warning('测试已停止')
}

// 重置测试
const resetTest = () => {
  testResults.value.forEach(item => {
    item.status = '待测试'
    item.result = ''
  })
  ElMessage.info('测试已重置')
}

// 查看测试详情
const viewTestDetail = (row: any) => {
  Object.assign(testDetailData, {
    ...row,
    startTime: '2024-01-15 10:30:00',
    endTime: '2024-01-15 10:35:20',
    log: '测试开始...\n检查设备连接...\n执行功能测试...\n测试完成'
  })
  testDetailDialog.visible = true
}

// 提交表单
const handleSubmit = () => {
  ElMessage.success('OTA版本创建成功')
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  gap: 10px;
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.file-info {
  margin-top: 20px;
}

.file-info h4 {
  margin-bottom: 15px;
  color: #303133;
}

.firmware-validation {
  margin-top: 30px;
}

.firmware-validation h4 {
  margin-bottom: 15px;
  color: #303133;
}

.validation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}

.test-results {
  margin: 20px 0;
}

.test-results h4 {
  margin-bottom: 15px;
  color: #303133;
}

.test-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.publish-options {
  margin-top: 20px;
}

.publish-options h4 {
  margin-bottom: 15px;
  color: #303133;
}

.test-log {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
}

.text-green-500 {
  color: #67c23a;
}

.text-red-500 {
  color: #f56c6c;
}

.upload-demo {
  width: 100%;
}
</style>